<template>
	<view class="content">
		<u-tabs :list="tabsList" lineWidth="30" lineColor="#5FC48D" :activeStyle="{
		            color: '#303133',
		            fontWeight: 'bold',
		            transform: 'scale(1.05)'
		        }" :inactiveStyle="{
		            color: '#606266',
		            transform: 'scale(1)'
		        }" @click="clickTabs" style="background-color: #fff;"></u-tabs>
		<view class="content-all">
			<!-- 订餐 -->
			<Order v-show="tabsIndex == 0" ref="order" @money="newMoney" />
			<!-- 通知公告 -->
			<Notice v-show="tabsIndex == 1" ref="notice" />
		</view>
		<!-- 去结算 -->
		<view class="settle">
			<view class="settle-qian">预估费用：￥ <span style="font-size: 36rpx;font-weight: bold;">{{money}}</span></view>
			<view class="settle-btn" @click="goSettle">结算</view>
		</view>
	</view>
</template>

<script>
	import Notice from '@/pages/home/components/notice.vue'
	import Order from '@/pages/home/components/order.vue'
	import {
		getUserInfo
	} from '@/api/login.js'
	export default {
		components: {
			Notice,
			Order
		},
		data() {
			return {
				tabsList: [{
					name: '订餐'
				}, {
					name: '通知公告'
				}],
				tabsIndex: 0,
				money: 0
			}
		},
		onLoad() {
			uni.$on('buyOk', (data) => {
				this.money = 0;
				this.$refs.order.money = 0
				this.$refs.order.listFoodMenuHttp(0)
				this.$refs.order.listFoodMenuHttp(1)
				this.$refs.order.listFoodMenuHttp(2)
				setTimeout(() => {
					this.$refs.order.tabsIndex = 0
				}, 1100)
			})
		},
		onUnload() {
			uni.$off('buyOk')
		},
		onPullDownRefresh() {
			// 下拉刷新，初始化所有数据
			this.money = 0;
			this.$refs.order.money = 0
			this.$refs.order.tabsIndex = 0
			this.$refs.notice.getNoticeHttp()
			this.$refs.order.listFoodMenuHttp(0)
			this.$refs.order.listFoodMenuHttp(1)
			this.$refs.order.listFoodMenuHttp(2)
			this.$refs.order.getSetInfoHttp()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			// 去结算
			goSettle() {
				let _this = this
				if (_this.money === 0) {
					uni.showToast({
						title: '请先选择菜品',
						icon: 'none'
					});
				} else {
					getUserInfo({
						userId: _this.$store.state.vuex_info.userId
					}).then(res => {
						if (res.success) {
							// 判断余额够不够
							_this.$u.vuex('vuex_info', res.data);
							if (_this.money > res.data.amount) {
								uni.showToast({
									title: '余额不足，请及时充值',
									icon: 'none'
								});
							} else {
								_this.$refs.order.goSettle()
							}
						}
					})
				}
			},
			// 更新总额
			newMoney(money) {
				this.money = this.keepTwoDecimalStr(money)
			},
			//精确显示小数点后2位，没有时补0
			keepTwoDecimalStr(num) {
				const result = Number(num.toString().match(/^\d+(?:\.\d{0,2})?/));
				let s = result.toString();
				let rs = s.indexOf('.');
				if (rs < 0) {
					rs = s.length;
					s += '.';
				}
				while (s.length <= rs + 2) {
					s += '0';
				}
				return s;
			},
			// 顶部点击事件
			clickTabs(item) {
				this.tabsIndex = item.index
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
	}

	.content {
		height: 100vh;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		background-color: #F8F8F8;

		.content-all {
			flex: 1;
			overflow: hidden;
		}

		.settle {
			position: fixed;
			bottom: 10rpx;
			left: 2.5%;
			z-index: 10;
			width: 95%;
			border-radius: 25px;
			height: 90rpx;
			line-height: 90rpx;
			background-color: #333;
			overflow: hidden;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.settle-btn {
				background-color: #5FC48D;
				// background-color: #F4C455;
				color: #fff;
				padding: 0 60rpx;
				font-size: 32rpx;
			}

			.settle-qian {
				margin-left: 50rpx;
				color: #eee;
				font-size: 28rpx;
			}
		}
	}
</style>